@extends('admin::layouts.master')
@section('content')
    <div class="col-lg-12">
        <div class="card card-border-color card-border-color-success">
            <div class="card-header">
                商品操作
            </div>
            <div class="card-body">
                <div class="col-lg-12">
                    <div class="card card-table">
                        <div class="card-header">
                            <a href="{{route('goods.index')}}" class="btn btn-space btn-primary">商品列表</a>
                            <a href="{{route('goods.create')}}" class="btn btn-space btn-success">添加商品</a>
                        </div>
                        <div class="card-body">
                            <div class="col-lg-12">
                                <div class="card card-border-color card-border-color-warning">
                                    <div class="card-header card-header-divider">添加商品<span class="card-subtitle" style="color: dimgrey;">请在下面添加新的商品</span></div>
                                    <div class="card-body">
                                        <form action="{{route('goods.store')}}" method="post" >
                                            {{--enctype="multipart/form-data"--}}
                                            @csrf
                                            <div class="form-group">
                                                <label> 商品名称 </label>
                                                <input type="text" name="gname" placeholder="请输入商品名称" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <label>所属分类</label>
                                                <div>
                                                    {{--1级分类--}}
                                                    <select class="form-control col-sm-3 onecate" name="cid[]" style="display: inline-block;">
                                                        <option value="">请选择顶级分类</option>
                                                        @foreach($alltopfenlei as $v)
                                                        <option value="{{$v['id']}}">{{$v['fname']}}</option>
                                                            @endforeach
                                                    </select>
                                                    {{--1级分类--}}

                                                    {{--2级分类--}}
                                                    <select class="form-control col-sm-3 twocate" name="cid[]" style="display: inline-block;">
                                                        <option value="">请选择二级分类</option>
                                                    </select>
                                                    {{--2级分类--}}

                                                    {{--3级分类--}}
                                                    <select class="form-control col-sm-3 threecate" name="cid[]" style="display: inline-block;">
                                                        <option value="">请选择三级分类</option>
                                                    </select>
                                                    {{--3级分类--}}
                                                </div>
                                            </div>
                                            {{--商品属性开始--}}
                                            <div class="form-group shuxing" style="display: none">
                                                <label>商品属性</label>
                                                <div class="col-12 col-sm-8 col-lg-12 form-check mt-2 sx">
                                                    {{--<label class="custom-control custom-checkbox custom-control-inline">--}}
                                                        {{--<input type="checkbox" class="custom-control-input">--}}
                                                        {{--<span class="custom-control-label">Option 3</span>--}}
                                                    {{--</label>--}}
                                                </div>
                                            </div>
                                            {{--商品属性结束--}}
                                            <div class="form-group">
                                                <label>商品描述</label>
                                                <textarea  name="miaoshu" rows="3" placeholder="请输入商品描述..." class="form-control" style="resize: none;"></textarea>
                                            </div>

                                            <div class="form-group">
                                                <label>商品价格</label>
                                                <input type="number" name="price" placeholder="请输入商品价格" class="form-control">
                                            </div>

                                            <div class="form-group">
                                                <label>商品访问量</label>
                                                <input type="number" name="click" placeholder="请输入商品访问量" class="form-control">
                                            </div>

                                            <div class="form-group ">
                                                <label for="">商品图片</label>
                                                {{--<input class="tupian form-control" type="text" name="pics" id=""  >--}}






                                                <hd-images allow-size="5" name="pics" :image-url="[]"></hd-images>
                                                {{--<hd-image name="pics" image-url="http://www.houdunwang.com/attachment/2018/05/29/90651527574866.jpg"></hd-image>--}}


                                                {{--multiple--}}
                                                {{--<div class="aaa"></div>--}}

                                                {{--<script>--}}
                                                    {{--$('.tupian').change(function () {--}}
                                                        {{--console.log($(this)[0])--}}
                                                        {{--var a=window.URL.createObjectURL($(this)[0].files[0]);--}}
                                                        {{--// var b = window.URL.revokeObjectURL;--}}
                                                        {{--// console.log(b);--}}
                                                        {{--$('.aaa').html('<img src="'+a+'" alt="" width="80">');--}}
                                                    {{--})--}}
                                                {{--</script>--}}
                                            </div>

                                            <div class="form-group">
                                                <label>商品详情</label>
                                                {{--<textarea id="inputTextarea3" name="content" rows="10" placeholder="请输入商品介绍..." class="form-control" style="resize: none;"></textarea>--}}
                                                <hd-simditor name="content" url="/bianjiqiupload"></hd-simditor>
                                            </div>

                                            <div class="row pt-0 pt-sm-5">
                                                <div class="col-sm-6 pl-0">
                                                    <p class="text-right">
                                                        <button type="submit" class="btn btn-space btn-primary">添加商品</button>
                                                    </p>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>


//        require(['hdjs']);
//        //上传图片
//        function upImageMul(obj) {
//            require(['hdjs'], function (hdjs) {
//                hdjs.image(function (images) {
//                    $(images).each(function (k, v) {
//                        $("<img src='" + v + "'/>").appendTo('#box');
//                    })
//                }, {
//                    //上传多图
//                    multiple: true,
//                })
//            });
//        }



        //点击顶级分类获得二级分类
        $('.onecate').change(function () {
            //每次点击顶级分类的时候，把二级分类的下拉列表清空
            $('.twocate').html('<option value="">请选择二级分类</option>');
            //每次点击顶级分类的时候，把三级分类的下拉框也清空
            $('.threecate').html('<option value="">请选择三级分类</option>')
            //获取点击的当前顶级分类的id
            var id = $(this).val();
            // alert(id);
            //获取当前选择的顶级分类的子级分类
            axios.get("/goods/getSonfenlei/" + id).then((res)=>{
                // console.log(res);
                //将获取的子分类数据加入到二级分类中
                var html = '';
                $.each(res.data,function (k,v) {
                    html += '<option value="' + v.id + '">' + v.fname + '</option>';
                })
                // console.log(html);
                $('.twocate').append(html);
            })
        })

        //点击二级分类获得三级分类
        $('.twocate').change(function () {
            //每次点击二级分类的时候，把三级分类的下拉列表清空
            $('.threecate').html('<option value="">请选择二级分类</option>');
            //获取点击的当前顶级分类的id
            var id = $(this).val();
            // alert(id);
            //获取当前选择的顶级分类的子级分类
            axios.get("/goods/getSonfenlei/" + id).then((res)=>{
                // console.log(res);
                //将获取的子分类数据加入到二级分类中
                var html = '';
                $.each(res.data,function (k,v) {
                    html += '<option value="' + v.id + '">' +v.fname + '</option>';
                })
                $('.threecate').append(html);
            })
        })

        //点击三级分类获得对应的可选属性
        $('.threecate').change(function () {
            //如果在添加商品的过程中突然想要变更成添加其他商品，就需要先把原来添加的商品属性清除，然后展示新的商品属性
            $('.sx').html('');
            //获取当前点击的顶级分类id
            var id = $(this).val();
            axios.get("/goods/getAttrs/" + id).then((res) => {
                //将获取的可用属性数据循环出来,追加到可用属性布局中
                if (res.data) {
                    //将商品属性布局显示
                    $('.shuxing').show();
                    var html = '';
                    $.each(res.data, function (k, v) {
                        html += '<label class="custom-control custom-checkbox custom-control-inline"><input type="checkbox" value="' + v.id + '" name="attrs[]" class="custom-control-input"><span class="custom-control-label">' + v.aname + '</span></label>';
                    })
                    $('.sx').append(html);
                }
            })
        })
    </script>
    @endsection